<template>
  <view class="hire_page">
    <couponListWindow :coupon="coupon" @ChangCouponsClone="ChangCouponsClone" :openType='openType'
      @ChangCoupons="ChangCoupons"></couponListWindow>
    <view class=" _w-max _top _left _z-index-5 _pos-fixed _top _left"
      :style="{ 'background-color': 'rgba(255, 255, 255,' + srollOpacity + ')' }">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18" style="position: relative;height: 96rpx;"
        :style="{ color: 'rgb(' + srollColor + ',' + srollColor + ',' + srollColor + ')' }">
        <view @click="back" style="position: absolute;left: 24rpx;top: 24rpx;" :style="{ filter: 'invert(' + 1 + ')' }">
          <image style="width: 48rpx;height: 48rpx;" :src="imgs.CHEVRO" mode="" />
        </view>
      </view>
      <view id="top"></view>
    </view>
    <!-- banner -->
    <swiper class="_w-max custom_banner" style="height: 520rpx;" :autoplay="true" indicator-dots :interval="3000"
      :duration="1000">
      <swiper-item v-for="(item, index) in details.banners" :key="index">
        <image class="_w-max _h-max" :src="item"></image>
      </swiper-item>
    </swiper>
    <view class="container">
      <view class="head">
        <view class="name">{{ details.type_name }}</view>
        <view class="price" v-if="!day_num">
          <view class="label">日租：</view>
          <view>{{ details.price }}元</view>
        </view>
        <view class="price" v-if="day_num">
          <view >套餐价格：</view>
          <view>{{ details.package_amount }}元</view>
        </view>
        <view class="poi_store" @click="toPoi">
          <view class="store_name">{{ details.store_name }}</view>
          <image class="poi" :src="imgs.POI"></image>
        </view>
        <view class="tag-wrapper">
          <view class="tag" v-for="tag in details.tag || []" :key="tag">{{ tag }}</view>
        </view>
      </view>
      <view class="params">
        <picker @change="bindAppenPickerChange" v-if="configs.appearance.length" :value="appearance_index" :range="configs.appearance" range-key="name">
          <view class="params-item">
            <view class="params-left">选择外观</view>
            <view class="param-right">
              <view class="seletcpnten" v-if="configs.appearance[appearance_index] && configs.appearance[appearance_index].name">
                {{ configs.appearance[appearance_index].name }}
              </view>
              <view class="pleaseselet" v-else>请选择</view>
              <image class="select-icon" src="https://taxi.raxan.xyz/wechat/static/images/more_model.png" mode="" />
            </view>
          </view>
        </picker>
        <view class="params-item"  @click="addUseUser">
          <view class="params-left">承租人</view>
          <view class="param-right">
            <view class="seletcpnten" v-if="contact_name">
              {{ contact_name }}
            </view>
            <view v-else class="pleaseselet">请选择承租人</view>
            <image class="select-icon" src="https://taxi.raxan.xyz/wechat/static/images/more_model.png" mode="" />
          </view>
        </view>
        <picker @change="bindColorPickerChange"  v-if="configs.color.length" :value="color_index" :range="configs.color" range-key="name">
          <view class="params-item">
            <view class="params-left">选择颜色</view>
            <view class="param-right">
              <view class="seletcpnten" v-if="configs.color[color_index] && configs.color[color_index].name">
                {{ configs.color[color_index].name }}
              </view>
              <view v-else class="pleaseselet">请选择</view>
              <image class="select-icon" src="https://taxi.raxan.xyz/wechat/static/images/more_model.png" mode="" />
            </view>
          </view>
        </picker>
        <view class="params-item" @tap="couponTap" v-if="!day_num">
          <view class="params-left">优惠券</view>
          <view class="param-right">
            <view class="seletcpnten" v-if="couponTitle !== '请选择优惠'">
              {{ couponTitle }}
            </view>
            <view v-else class="pleaseselet">请选择优惠</view>
            <image class="select-icon" src="https://taxi.raxan.xyz/wechat/static/images/more_model.png" mode="" />
          </view>
        </view>
      </view>

      <view class="body">
        <div style="height: 96rpx;">
          <view class="tabs" id="tabs" :class="{ fixTop: fixTop }" :style="fixTop ? ('margin-top:' + recHeight) : ''">
            <view class="tabs-item" :class="{ 'tabs-item-active': selEl === tab.el }" @click="switchTab(tab.el, index)"
              v-for="(tab, index) in tabs" :key="tab.el">
              {{ tab.text }}
              <view class="tab_btm"></view>
            </view>
          </view>
        </div>
        <view class="body_inner">
          <view class="body_block" id="basic">
            <view class="body_title">基本信息</view>
            <view class="basic">
              <view class="basic_item">
                <view class="basic_label">车型结构</view>
                <view class="basic_value">{{ details.car_cate }}</view>
              </view>
              <view class="basic_item">
                <view class="basic_label">变速箱</view>
                <view class="basic_value">{{ details.gear === 'auto' ? '自动' : '手动' }}</view>
              </view>
              <view class="basic_item">
                <view class="basic_label">座位数</view>
                <view class="basic_value">{{ details.seat_num }}座</view>
              </view>
              <view class="basic_item">
                <view class="basic_label">能源类型</view>
                <view class="basic_value">{{ details.energy_type }}</view>
              </view>
              <view class="basic_item">
                <view class="basic_label">排量</view>
                <view class="basic_value">{{ details.power }}</view>
              </view>
            </view>
          </view>
          <view class="body_block" id="config">
            <view class="body_title">车型配置</view>
            <view class="config" v-if="details.car_config">
              <view class=" config_item" v-for="config in details.car_config || []" :key="config.id">
              <view>{{ config.name }}</view>
              <image class="config_select" src="https://taxi.raxan.xyz/wechat/static/images/select.png" mode="" />
            </view>
          </view>
        </view>
        <view class="body_block" id="introduce">
          <view class="body_title">车辆介绍</view>
          <view style="margin-top: 32rpx;margin-bottom: 26rpx;">
            <rich-text :nodes="details.introduce"></rich-text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="btn-warpper" style="position: fixed;">
    <view class="btn" @click="toHireCar">立即预定 总价 {{ day_num?details.package_amount:details.price }}起</view>
  </view>
  </view>
</template>
<script>
import { fetchCarDetail, appearanceColor } from '@/api/hire.js'
import {
  getCareFee,
  get_use_coupon_list
} from '@/api/car.js';
import couponListWindow from "@/components/couponListWindow";
const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/hire/' + name

const IMAGES = {
  CHEVRO: 'https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png',
  POI: 'https://taxi.raxan.xyz/wechat/static/images/iocn-poiadress.png',
  BANNER: concat('image.png')
}

export default {
  components: {
    couponListWindow
  },
  data() {
    return {
      contact_id: 0,
      contact_name: '',
      contact_phone: '',
      couponTitle: '请选择优惠',
      openType: 1, //优惠券打开方式 1=使用
      coupon: {
        coupon: false,
        list: [],
      },
      appearance_index: '',
      color_index: '',
      params: {},
      configs: {
        appearance: [],
        color: []
      }, // 外观 颜色
      fixTop: false,
      scrollFilter: 0,
      recHeight: 0,
      srollOpacity: 0,
      use_min_price: '',
      coupon_price: '',
      couponId: '',
      srollColor: 255,
      imgs: IMAGES,
      loading: false,
      id: '',
      selEl: '#basic',
      distanceArr: [],
      tabTop: 0,
      headTop: 0,
      tabs: [
        { text: '基本信息', el: '#basic' },
        { text: '车型配置', el: '#config' },
        { text: '车辆介绍', el: '#introduce' }
      ],
      details: {
        tag: [],
        banners: []
      },
      userRead: false,
      DateTimeSite: {},
      orderTime: {},
      store_id: '',
      order_data: {
        fee: {}
      },
      day_num:''
    }
  },
  onPageScroll(e) {
    this.scrollFilter = e.scrollTop < 100 ? Math.floor(e.scrollTop / 100) : 1;
    this.srollColor = e.scrollTop < 100 ? 255 - Math.floor(e.scrollTop * 2.55) : 0;
    this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
    this.fixTop = e.scrollTop + this.headTop + this.recHeightNum > this.tabTop;
  },
  onLoad(options) {
   
    this.date = options.date;
    this.timeset = options.timeset;
    this.DateTimeSite = JSON.parse(decodeURIComponent(options.timeset));
    this.orderTime = JSON.parse(decodeURIComponent(options.date));
    this.params = JSON.parse(decodeURIComponent(options.params));
    console.log(this.params,'12312312')
    this.day_num = this.params.day_num||''
    this.getPhoneInfo();
    this.fetchCarDetail();
    this.appearanceColor();
  },
  methods: {
    addUseUser() {
      const { contact_id, contact_name, contact_phone } = this;
      uni.navigateTo({
        url: '/pages/info_setting/common_tenant?contact_id=' + contact_id + '&contact_name=' + contact_name + '&contact_phone=' + contact_phone
      })
    },
    couponTap: function () {
      this.coupon.coupon = true;
      this.coupon.list.forEach((item, index) => {
        if (item.id == this.couponId) {
          item.is_use = 1
        } else {
          item.is_use = 0
        }
      })
      this.$set(this.coupon, 'list', this.coupon.list);
    },
    getCareFee() {
      var that = this;
      let area_site = that.DateTimeSite;
      let data = {
        store_id: that.store_id, //下单门店
        take_place_id: area_site.area_id, //取车服务点
        return_place_id: area_site.black_area_id, //还车服务点
        is_other_places: area_site.is_other_places, //是否异店还车
        type_id: that.params.id, //下单车型
        start_time: that.orderTime.starStamp, //开始时间
        end_time: that.orderTime.endStamp,//结束时间
        is_visit: area_site.is_visit,       //是否上门送取车
        take_latitude: area_site.take_latitude,
        take_longitude: area_site.take_longitude,
        return_latitude: area_site.black_latitude,
        return_longitude: area_site.black_longitude,
      }
      getCareFee(data).then(res => {
        that.order_data.fee = res.data;
        that.getCouponList();
      }).catch((err) => {
        console.log(err);
        uni.showToast({ title: err, icon: 'none' })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      })
    },
    getCouponList: function () {
      console.log(this.order_data.fee)
      let that = this,
        obj = {
          price: this.order_data.fee.car_fee,   //基本租车费用
        };
      get_use_coupon_list(obj).then(res => {
        that.$set(that.coupon, 'list', res.data);
        let index = res;
        let list = this.coupon.list;
        for (let i = 0, len = list.length; i < len; i++) {
          if (i != index) {
            list[i].use_title = '';
            list[i].is_use = 0;
          }
        }
      });
    },
    ChangCouponsClone: function () {
      this.$set(this.coupon, 'coupon', false);
    },
    ChangCoupons: function (e) {
      let index = e,
        list = this.coupon.list,
        couponTitle = '请选择优惠券',
        couponId = 0,
        use_min_price = 0,
        coupon_price = 0;
      for (let i = 0, len = list.length; i < len; i++) {
        if (i != index) {
          list[i].use_title = '';
          list[i].is_use = 0;
        }
      }
      if (list[index].is_use) {
        //不使用优惠券
        list[index].use_title = '';
        list[index].is_use = 0;
      } else {
        //使用优惠券
        list[index].use_title = '不使用';
        list[index].is_use = 1;
        couponId = list[index].id;
        coupon_price = list[index].coupon_price;
        use_min_price = list[index].use_min_price;
        
        if(list[index].voucher_type===0){
           couponTitle = '-￥' + coupon_price;
        }
        
       if(list[index].voucher_type===1){
          couponTitle =   list[index].coupon_title
       }
      }
      this.couponTitle = couponTitle;
      this.use_min_price = use_min_price;
      this.coupon_price = coupon_price;
      this.couponId = couponId;
      this.$set(this.coupon, 'coupon', false);
      this.$set(this.coupon, 'list', list);
    },
    bindAppenPickerChange(e) {
      this.appearance_index = e.detail.value
      this.params.appearance_id = this.configs.appearance[this.appearance_index].id;
    },
    bindColorPickerChange(e) {
      this.color_index = e.detail.value
      this.params.color_id = this.configs.color[this.color_index].id;
    },
    appearanceColor() {
      this.checkLoading(
        () => appearanceColor(this.id).then(res => {
          this.configs = res.data || {
            appearance: [],
            color: []
          }
        })
      )
    },
    toHireCar() {
      const formData = { ...this.params };
      if (!formData.appearance_id) {
        return uni.showToast({
          title: '请选择外观',
          icon: 'none'
        });
      }
      if (!formData.color_id) {
        return uni.showToast({
          title: '请选择颜色',
          icon: 'none'
        });
      }
      if (!this.contact_id) {
        return uni.showToast({
          title: '请选择承租人',
          icon: 'none'
        });
      }
      formData.coupon_user_id = this.couponId;
      formData.contact_id = this.contact_id,
      formData.contact_name = this.contact_name,
      formData.contact_phone = this.contact_phone;
      uni.navigateTo({
        url: `/pages/car_sub/order/confrim?params=${JSON.stringify(formData)}`
          + '&date=' + this.date
          + '&timeset=' + this.timeset
      })
    },
    getDistanceArr() {
      const _this = this
      uni.createSelectorQuery().select('#top').boundingClientRect(data => {
        _this.headTop = data.top
        console.log(_this.headTop)
      }).exec()
      uni.createSelectorQuery().select('#tabs').boundingClientRect(data => {
        _this.tabTop = data.top
        console.log(_this.tabTop)
      }).exec()
      _this.tabs.map(tab => {
        uni.createSelectorQuery().select(tab.el).boundingClientRect(data => {
          _this.distanceArr.push(data.top)
        }).exec()
      })
    },
    back() {
      uni.navigateBack()
    },
    switchTab(el, i) {
      this.selEl = el;
      const top = this.distanceArr[i] - 96 - this.recHeightNum;
      uni.pageScrollTo({
        scrollTop: top,
        duration: 500,
      });
    },
    toPoi() {
      const { latitude, longitude, store_name: poiaddress } = this.details;
      const param = { latitude, longitude, poiaddress }
      console.log(param)
      uni.navigateTo({
        url: `/pages/store_sub/address/index?param=${JSON.stringify(param)}`
      })
    },
    fetchCarDetail() {
      this.checkLoading(
        () => fetchCarDetail({
          id: this.params.id,
          start_time: this.params.start_time,
          end_time: this.params.end_time,
        }).then(res => {
          this.details = res.data;
          this.details.banners = this.details.detail_img.split(',').filter(i => !!i);
          this.params.place_id = this.details.place_id
          this.params.store_id = this.details.place_id
          this.store_id = this.params.store_id;
          this.getCareFee();
          setTimeout(() => this.getDistanceArr())
        })
      )
    },
    checkLoading(fn) {
      this.loading = true;
      uni.showLoading({ title: '加载中' })
      fn().finally(() => {
        this.loading = false;
        uni.hideLoading()
      })
    },
    // 获取顶部高度信息
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.recHeightNum = res.statusBarHeight;
          this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.fixTop {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 5;
  top: 96rpx;
}

.custom_banner {

  //未选中的指示点样式，支持h5、app
  /deep/ .uni-swiper-dot {
    width: 36rpx;
    height: 4rpx;
    border-radius: 0 !important;
    background: #F1F4F5 !important;
  }

  //选中的指示点样式，支持h5、app
  /deep/ .uni-swiper-dot-active {
    background: #366EF4 !important;
  }

  //未选中的指示点样式，支持微信小程序
  /deep/ .wx-swiper-dot {
    width: 36rpx;
    height: 4rpx;
    border-radius: 0 !important;
    background: #F1F4F5 !important;
  }

  //选中的指示点样式，支持微信小程序
  /deep/ .wx-swiper-dot-active {
    background: #366EF4 !important;
  }

  //指示点位置，支持h5、app
  /deep/ .uni-swiper-dots-horizontal {
    bottom: 64rpx !important;
    text-align: right;
    height: 0rpx;
  }

  //指示点位置，支持微信小程序
  /deep/ .wx-swiper-dots-horizontal {
    bottom: 64rpx !important;
    text-align: right;
    height: 0rpx;
  }
}

.container {
  margin-top: -40rpx;
  position: relative;
  z-index: 1;
  padding-bottom: 112rpx;

  .head {
    background-color: #FFFFFF;
    border-radius: 32rpx 32rpx 0px 0px;
    padding: 32rpx;
    padding-top: 44rpx;
    margin-bottom: 20rpx;

    .name {
      height: 56rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 40rpx;
      color: rgba(0, 0, 0, 0.9);
      line-height: 56rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .guide_price {
      margin-top: 24rpx;
      height: 48rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #008DFF;
      text-align: left;
    }

    .price {
      margin-top: 24rpx;
      display: flex;
      height: 40rpx;
      align-items: center;
      justify-content: flex-start;
      font-weight: bold;
      font-size: 32rpx;
      color: #FF5700;

      .label {
        width: 96rpx;
        flex: 0 0 96rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        text-align: left;
      }
    }

    .poi_store {
      display: flex;
      padding: 24rpx 0;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #E7E7E7;
      margin-bottom: 24rpx;

      .store_name {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.6);
        text-align: left;
      }

      .poi {
        width: 40rpx;
        flex: 0 0 40rpx;
        height: 40rpx;
      }
    }

    .tag-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;

      .tag {
        background: #E5F3FF;
        border-radius: 0rpx 0rpx 8rpx 0rpx;
        padding: 0 8rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #111E36;
      }
    }
  }

  .params {
    margin-bottom: 20rpx;
    padding: 0 32rpx;
    background-color: #FFFFFF;

    .params-item {
      height: 112rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .params-left {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.9);
      }

      .param-right {
        color: rgba(0, 0, 0, 0.9);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8rpx;

        .select-icon {
          width: 48rpx;
          flex: 0 0 48rpx;
          height: 48rpx;
        }

        .pleaseselet {
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }

  .body {
    background-color: #FFFFFF;

    .tabs {
      height: 96rpx;
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      background-color: #FFFFFF;

      .tabs-item {
        padding: 0 32rpx;
        color: rgba(0, 0, 0, 0.6);
        font-size: 28rpx;
        line-height: 96rpx;
        text-align: center;
        position: relative;

        .tab_btm {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          width: 32rpx;
          height: 6rpx;
          background: #008DFF;
          border-radius: 1998px 1998px 1998px 1998px;
          display: none;
        }

        &.tabs-item-active {
          font-weight: 600;
          font-size: 40rpx;
          color: #008DFF;

          .tab_btm {
            display: block;
          }
        }
      }
    }

    .body_inner {
      padding: 20rpx 32rpx;

      .body_block {
        border-bottom: 1px solid #E7E7E7;
        margin-bottom: 28rpx;

        &:last-child {
          border: none;
          margin-bottom: 0;
        }

        .body_title {
          height: 44rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.9);
          line-height: 44rpx;
          text-align: left;
        }

        .basic {
          display: flex;
          flex-wrap: wrap;
          margin-top: 32rpx;

          .basic_item {
            width: 50%;
            flex: 0 0 50%;
            display: flex;
            height: 40rpx;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 28rpx;

            .basic_label {
              flex: 0 0 50%;
              font-size: 24rpx;
              color: rgba(0, 0, 0, 0.6);
              font-weight: 400;
            }

            .basic_value {
              flex: 0 0 50%;
              font-weight: 500;
              font-size: 28rpx;
              color: rgba(0, 0, 0, 0.9);
            }
          }
        }

        .config {
          margin-top: 36rpx;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-wrap: wrap;

          .config_item {
            flex: 0 0 50%;
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.9);
            margin-bottom: 32rpx;

            .config_select {
              flex: 0 0 48rpx;
              width: 48rpx;
              height: 48rpx;
              margin-left: 8rpx;
            }
          }
        }
      }
    }
  }
}

.btn-warpper {

  left: 0;
  right: 0;
  bottom: 0;
  padding: 8rpx 32rpx;
  z-index: 10;
  border-top: 1rpx solid #E7E7E7;
  background-color: #FFFFFF;

  .btn {
    line-height: 96rpx;
    color: #F8F9FC;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    background-color: #008DFF;
    border-radius: 12rpx;
  }
}

.f_s_18 {
  font-size: 36rpx;
}

.felx_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-container {
  height: 604rpx;
  position: relative;

  .close {
    height: 44rpx;
    width: 44rpx;
    position: absolute;
    right: 16rpx;
    top: 16rpx;
  }

  .popup_title {
    padding: 48rpx;
    padding-bottom: 44rpx;
    line-height: 48rpx;
    text-align: center;
    font-weight: 600;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
  }

  .popup_container {
    padding: 0 32rpx 28rpx 32rpx;

    .read {
      line-height: 48rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 32rpx;
    }

    .read_item {
      display: flex;
      gap: 24rpx;
      align-items: center;
      justify-content: flex-start;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.6);
      margin-bottom: 32rpx;

      .dunpai {
        width: 48rpx;
        flex: 0 0 48rpx;
        height: 48rpx;
      }
    }
  }
}
</style>